<!-- home -->
<template>
  <div class="home">
    <div class="width:500px;height:300px">
      <span>blur</span>
      <el-slider v-model="option_heatmap.blur" show-input></el-slider>
      <span>radius</span>
      <el-slider v-model="option_heatmap.radius" show-input></el-slider>
    </div>
    <el-button @click="refreshData()">refreshData</el-button>
    <el-button @click="addHeatMapLayer()">addHeatMapLayer</el-button>
    <div id="map" class="content"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import OSM from "ol/source/OSM";
import VectorSource from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";
import { Heatmap as HeatmapLayer, Tile as TileLayer } from "ol/layer";

export default {
  data() {
    return {
      map: {},
      option_heatmap: {
        blur: 43,
        radius: 50
      },
      heatMapLayer: {},
      heatData: {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [112.4, 31.19] },
            properties: { weight: 0.9 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [113.3, 30.6] },
            properties: { weight: 0.19 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [123.3, 30.6] },
            properties: { weight: 0.419 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [105.3, 30.6] },
            properties: { weight: 0.319 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [106.3, 30.6] },
            properties: { weight: 0.719 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [109.3, 31.6] },
            properties: { weight: 0.519 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [109.3, 30.6] },
            properties: { weight: 0.319 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [108.3, 32.6] },
            properties: { weight: 0.139 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [118.3, 31.6] },
            properties: { weight: 0.129 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [108.3, 33.6] },
            properties: { weight: 0.19 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [108.3, 32.6] },
            properties: { weight: 0.189 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [100.3, 30.6] },
            properties: { weight: 0.1 }
          }
        ]
      },

      newHeatData: {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [112.4, 31.19] },
            properties: { weight: 0.9 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [113.3, 30.6] },
            properties: { weight: 0.19 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [123.3, 30.6] },
            properties: { weight: 0.419 }
          },
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [105.3, 30.6] },
            properties: { weight: 0.319 }
          }
        ]
      }
    };
  },
  components: {},
  created() {},
  mounted() {
    this.initMap();
  },
  computed: {},
  methods: {
    initMap() {
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new OSM()
          })
        ],
        view: new View({
          projection: "EPSG:4326", //使用这个坐标系
          center: [104.704968, 31.540962], //西南科技大学
          zoom: 5
        })
      });
    },
    addHeatMapLayer() {
      this.heatMapLayer = new HeatmapLayer({
        source: new VectorSource({
          features: new GeoJSON().readFeatures(this.heatData)
        }),
        blur: this.option_heatmap.blur,
        radius: this.option_heatmap.radius,
        weight: (e) => {
          return e.values_.count;//根据权重展示热力图！关键点，weight范围为：0-1！！！
        },
      });
      this.map.addLayer(this.heatMapLayer);
    },
    refreshData() {
      this.heatData = this.newHeatData;
      this.map.removeLayer(this.heatMapLayer);
      this.addHeatMapLayer();
    }
  },
  watch: {
    option_heatmap: {
      handler(/*newVal, oldVal*/) {
        this.heatMapLayer.setBlur(this.option_heatmap.blur);
        this.heatMapLayer.setRadius(this.option_heatmap.radius);
      },
      deep: true
    }
  }
};
// 不要用 sass，要用 less
</script>

<style scoped lang="less">
.home {
  height: 100vh;
  border: 1px solid red;
  .content {
    width: 800px;
    height: 600px;
    border: 1px solid blue;
    margin: auto;
  }
}
</style>